در این خود آموز شما خواهید توانست یک وب سایت با ساده ترین روش و به صورت مرحله به مرحله بسازید . این وب سایت بر طبق استانداردهای روز طراحی وب ساخته خواهد شد و شما این استانداردها را به ساده ترین روش و به صورت عملی فرا خواهید گرفت. در طول این خود آموز ملاحظه خواهید کرد که در چندین قسمت برای تصحیح کدهای اولیه به مراحل قبل باز خواهیم گشت که در طراحی به صورت عملی این امریست اجتناب ناپذیر .

متن خود آموز ، کدها و فایل گرافیکی این وب سایت نیز برای سهولت در یاد گیری شما دوستان در اختیار شما قرار خواهد گرفت.

میتوانید دموی نهایی را از اینجا مشاهده نمایید.

قبل از شروع بد نیست به چند خودآموز و مقاله کاربردی و مفید در باره طراحی وب سایت اشاره داشته باشم که اگر آنها را مطالعه نکردید حتما قبل از انجام این خودآموز کامل و مفید و البته طولانی آنها را بخوانید :

• چگونه طراح سایت قابلی شویم

• چگونه طراح وب سایت شویم؟

• هشت گام مهم برای ساخت یک وب سایت

• اهمیت رنگها در طراحی

• اصول و پیش نیازهای طراحی وب سایت #۱

• اصول و پیش نیازهای طراحی وب سایت #۲
  

این خود آموز از چهار بخش به صورت زیر تشکیل شده است :

قسمت اول : گرافیک وب سایت ( طراحی یک طرح پیش فرض گرافیکی )
قسمت دوم : برش طرح ( برش دادن تصاویر برای استفاده در کد ها و صفحات وب )
قسمت سوم : کدهای html  ( نوشتن کدهای html  و تعیین ساختار صفحه وب )
قسمت چهارم : کدهای css  ( شکل دهی کدهای html  با استفاده از کدهای css  )

قسمت اول – گرافیک وب سایت

مرحله اول – به کجا خواهیم رسد ؟

یک وب سایت ساده و معمولی برای طراحی و کد نویسی در نظر گرفته شده ولی کار کردن بر روی این وب سایت بسیار آموزنده خواهد بود. بنابراین مراحل را دنبال کنید و به صورت عملی یاد بگیرید و تجربه کنید.

در زیر نمایی نهایی صفحه وب مورد نظر را می بینید.

مرحله دوم – آماده شدن :

به چه چیزهایی احتیاج دارید ؟

سعی شده است مراحل طراحی و کدنویسی این وب سایت به ساده ترین روش و برای افراد مبتدی توضیح داده شود ولی برای شروع احتیاج به دانش مقدماتی و آشنایی با برخی از نرم افزارها دارید:

• نرم افزار فتو شاپ  Photoshop یا ویرایشگرهای تصویر مشابه
• نرم افزارهای تولید کد مانند Dreamweaver
• آشنایی مقدماتی با کدهای html
• آشنایی مقدماتی با کدهای Css
• استفاده از ویرایشگرهای استاندارد ( IE+7 ,  FireFox  ) –  در این خودآموز از FireFox   استفاده شده است

در صورت نیاز می توانید به وب سایت  W3Schools مراجعه نمایید و نکات آموزنده بسیاری را فرا بگیرید.

ساختار و لایه ها

برای شروع ساختار بسیار ساده و عمومی را در نظر میگیریم که بسیاری از شما دوستان  با این ساختار آشنا هستید .

header, content, sidebar and footer

اینها هر کدام از اجزاء تشکیل دهنده وب سایت ما خواهند بود و نحوه قرارگیری و جایگاه آنها در وب سایت بسیار مهم است.

این ایده خوبی هست که قبل از شروع به کار کد نویسی نمومنه ای  از وب سایت و صفحه وب را در نرم افزارهای طراحی گرافیکی مانند فتوشاپ طراحی کنیم و سپس آن را در نرم افزارهای تولید صفحات وب بسازیم.

مرحله سوم – شروع به کار :

خوب برای شروع به محیط نرم افزار فتوشاپ می رویم  و یک برگه با عرض و طول  ۱۰۰۰px در ۱۲۰۰px  ایجاد می کنیم . در اینجا سعی شده عرض مورد نظر بیشتر از عرض واقعی وب سایت در نظر گرفته شود تا محیط باز تری برای کار وجود داشته باشد و در انتها این برگه به اندازه واقعی خود در خواهد آمد.

اگر با محیط نرم افزار فتوشاپ آشنایی کافی داشته باشید کار با این خود آموز برای شما بسیار راحت خواهد بود. برای سهولت در کار از خط کش و خط های کمکی استفاده میکنیم . مقیاس خط کش را برای     Pixel تنظیم کنید (واحد اندازه گیری در طراحی وب سایت  Pixel است) .

طبق تصویر دو خط کمکی عمودی  یکی در اندازه  ۱۰۰px و دیگری در ۹۰۰px  ایجاد کنید . در حال حاضر عرض وب سایت ۸۰۰px   در نظر گرفته شده است ( بین خط کمکی روی ۱۰۰px  و خط کمکی روی ۹۰۰px  ). بعد ازایجاد این دو خط کمکی یک خط دیگر در اندازه ۶۳۰px  ایجاد کنید. در حال حاضر ۳ خط کمکی در این برگه ایجاد شده است. در صورت نیاز می توانید با کشیدن خط ها و Drag  کردن آنها بر روی خط کش آنها را پاک کنید.

مرحله چهارم – Header :

پس از نشانه گذاری مرزهای وب سایت در مرحله قبل به قسمت  Header  وب سایت می رسیم که یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت است. شعار تبلیغاتی ، لوگو و تصاویر تبلیغاتی  وب سایت شما در این قسمت قرار خواهد گرفت .با استفاده از ابزارها ( کلید میانبر U  )  یک مستطیل به ارتفاع ۱۷۰ px  و با رنگ #۲۳b6eb ایجاد کنید . سعی کنید که از نوار ابزار فتوشاپ برای اندازه گذاری دقیق اجزاء  و همچنین چینش دقیق اجزاء در صفحه استفاده کنید .

یک مستطیل دیگر مانند تصویر روی  مستطیل اولیه خود ایجاد کنید به ارتفاع ۳۰px  و رنگ #۵d5a5a ( مستطیل تیره رنگ در بالای header  )

مرحله پنجم – Navigation Bar – نوار منوها :

برای ایجاد نوار منوها طبق تصویر یک مستطیل با ارتفاع ۶۰px  ایجاد کنید ، در ابتدا رنگ این مستطیل مهم نیست زیرا ازگرادیانت ها برای زیباتر شدن آن استفاده خواهیم کرد. برای آشنایی با گرادیانت ها می توانید مطلب فوق را مطالعه نمایید.

استفاده از گرادیانت در طراحی

پس از ایجا د این مستطیل  ، گرادیانتی  با استفاده از رنگ  #e2e3e4  تا  #bebdbd  با زاویه  ۹۰  درجه ایجاد کنید.

مرحله ششم – Footer :

برای ایجاد footer   نیز از یک مستطیل با رنگ  #۵d5a5a  استفاده کنید. در اینجا ارتفاع  ۵۰px  کافیست. یک footer  خوب و استاندارد نقش بسیار ارزنده ای در بالا بردن دسترسی پذیری وب سایت و حتی زیبایی آن دارد و یکی از اجزای مهم یک وب سایت است .

مرحله هفتم – Logo –  لوگو :

لوگو یکی از اجزاء مهم تشکیل دهنده یک وب سایت است که معمولا باید گویای نوع فعالیت و خدمات  وب سایت شما باشد .

شما می توانید لوگوی خود را به صورت جدا گانه ایجاد نمایید و در قسمت کد نویسی به شما آموزش داده خواهد شد که چگونه آن را وارد وب سایت خود نمایید. در لینک زیر می توانید مطالب مفیدی را در مورد طراحی و استانداردهای یک لوگو بخوانید.

چگونه میتوان یک لوگوی حرفه ای و تاثیر گذار ساخت؟

برای  ایجاد لوگو طبق مراحل زیر عمل شده است و البته شما  نیز می توانید از لوگوی مورد نظر خودتان استفاده نمایید.
کلمه مورد نظر خود را با استفاده از مشخصات زیر بر روی طرح می نویسیم (LOGO ).

1. Font: Myriad Pro
2. Style: Bold
3. Size: 60px
4. Color: #36809a

مرحله هشتم – tagline :

با استفاده از مشخصات زیر شعار تبلیغاتی خود را در جلوی لوگوی طراحی شده می نویسیم.

1. Font: Arial
2. Style: Bold
3. Size: 30pt
4. Color: #e4dfdf

مرحله نهم – منو ها :

با استفاده از مشخصات زیر منو ها را با اندازه و رنگ مورد نظر طراحی می کنیم.

1. Font: Arial
2. Style: Bold
3. Size: 30pt
4. Color: #676666

مرحله دهم – محتویات و نوشته ها :

می توان با توجه به تصاویر و با استفاده از مشخصات زیر محتویات و نوشته ها را نیز در جای مناسب قرار داد تا طرحی کلی و پیش فرض از صفحه وب برای ادامه کار بدست آید.
این نکته در اینجا قابل ذکر است که ایجاد یک طرح گرافیکی قبل از شروع کد نویسی یک وب سایت خوبیهای فراوانی دارد که به چند نکته از اشاره می شود
ایجاد یک نقشه راه برای اینکه بدانیم به کجا خواهیم رسید.
استفاده از تصاویر طرح گرافیکی برای ساختن وب سایت.
رفع ایراد ها و نواقص قبل از شروع به کد نویسی ( مخصوصا برای کار با مشتری ها …!؟ )
کار کردن بر روی یک طرح گرافیکی بسیار راحت تر از کد نویسی آن است بنابراین می توانیم تمامی ایده  ها ی خود برای یک صفحه وب را در یک طرح گرافیکی پیاده نماییم و سپس به آماده سازی آن بپردازیم.

h2 Header:

1. Font: Arial
2. Style: Bold
3. Size: 36pt
4. Color: #0e5d7a

h3 Header:

1. Font: Arial
2. Style: Bold
3. Size: 24pt
4. Color: #444444

Paragraph:

1. Font: Arial
2. Style: Normal
3. Size: 14pt
4. Color: #595858